{% load static %}
{% load i18n %}
{% load rules %}
{% load filters %}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="author" content="Label Studio"/>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=0.9, shrink-to-fit=no">

  <!-- Address string color -->
  <meta name="theme-color" content="#272727"> <!-- Chrome, Firefox OS and Opera -->
  <meta name="msapplication-navbutton-color" content="#272727">  <!-- Windows Phone -->
  <meta name="apple-mobile-web-app-status-bar-style" content="#272727">  <!-- iOS Safari -->

  <!-- Preload fonts -->
  <link rel="preload" href="{{settings.HOSTNAME}}{% static 'fonts/Figtree-Regular.ttf' %}" type="font" crossorigin="anonymous">
  <link rel="preload" href="{{settings.HOSTNAME}}{% static 'fonts/Figtree-SemiBold.ttf' %}" type="font" crossorigin="anonymous">

  <!-- CSS -->
  <link href="{{settings.HOSTNAME}}{% static 'images/favicon.ico' %}" rel="shortcut icon"/>
  <link href="{{settings.HOSTNAME}}{% static 'css/uikit.css' %}" rel="stylesheet">
  <link href="{{settings.HOSTNAME}}{% static 'css/main.css' %}" rel="stylesheet">
  <link href="{{settings.HOSTNAME}}/react-app/main.css?v={{ versions.backend.commit }}" rel="stylesheet">

  {% block app-scripts %}
  {% endblock %}

  <script
   src="https://browser.sentry-cdn.com/5.17.0/bundle.min.js"
   integrity="sha384-lowBFC6YTkvMIWPORr7+TERnCkZdo5ab00oH5NkFLeQUAmBTLGwJpFjF6djuxJ/5"
   crossorigin="anonymous"></script>

  <script nonce="{{request.csp_nonce}}">
    window.exports = () => {};
  </script>

  {% block head %}
    <title>Label Studio</title>
  {% endblock %}

  {% block head-toast %}
    <link href="{{settings.HOSTNAME}}{% static 'css/Toast.min.css' %}" rel="stylesheet">
  {% endblock %}

  {% get_current_language as LANGUAGE_CODE %}
  {% get_available_languages as LANGUAGES %}
</head>

<body>

<div class="app-wrapper"></div>

<template id="main-content">
  <main class="main">

    <!-- Space & Divider -->
    {% block divider %}
      <div class="ui divider divider-wide"></div>
    {% endblock %}

    <!-- Content -->
    {% block content %}
    {% endblock %}

  </main>
</template>

<template id="context-menu-left">
  {% block context_menu_left %}{% endblock %}
</template>

<template id="context-menu-right">
  {% block context_menu_right %}{% endblock %}
</template>

<script id="app-settings" nonce="{{request.csp_nonce}}">
  window.APP_SETTINGS = Object.assign({
    user: {
      id: {{ user.pk }},
      username: "{{user.username}}",
      firstName: "{{user.first_name}}",
      lastName: "{{user.last_name}}",
      initials: "{{user.get_initials}}",
      email: "{{user.email}}",
      allow_newsletters: {% if user.allow_newsletters is None %}null{% else %}{{user.allow_newsletters|yesno:"true,false"}}{% endif %},
      {% if user.avatar %}
      avatar: "{{user.avatar_url|safe}}",
      {% endif %}
    },
    debug: {{settings.DEBUG|yesno:"true,false"}},
    hostname: "{{settings.HOSTNAME}}",
    version: {{ versions|json_dumps_ensure_ascii|safe }},
    sentry_dsn: {% if settings.FRONTEND_SENTRY_DSN %}"{{ settings.FRONTEND_SENTRY_DSN }}"{% else %}null{% endif %},
    sentry_rate: "{{ settings.FRONTEND_SENTRY_RATE }}",
    sentry_environment: "{{ settings.FRONTEND_SENTRY_ENVIRONMENT }}",
    editor_keymap: JSON.parse({{ settings.EDITOR_KEYMAP|safe }}),
    feature_flags: {{ feature_flags|json_dumps_ensure_ascii|safe }},
    feature_flags_default_value: {{ settings.FEATURE_FLAGS_DEFAULT_VALUE|json_dumps_ensure_ascii|safe }},
    server_id: {{ request.server_id|json_dumps_ensure_ascii|safe }},

    {% block app_more_settings %}
      flags: {
        allow_organization_webhooks: {{settings.ALLOW_ORGANIZATION_WEBHOOKS|yesno:"true,false"}}
      }
    {% endblock %}

  }, {% block frontend_settings %}{}{% endblock %});
</script>

{% block app-js %}
<script src="{{settings.HOSTNAME}}/react-app/runtime.js?v={{ versions.backend.commit }}"></script>
{% comment %}
  NOTE: purposely setting this to not cache using backend commit as we do not intend this to change frequently.
  If for any reason we need to invalidate the cache, we can do so by changing the version number.
{% endcomment %}
<script src="{{settings.HOSTNAME}}/react-app/vendor.js?v=1"></script>
<script src="{{settings.HOSTNAME}}/react-app/main.js?v={{ versions.backend.commit }}"></script>
{% endblock %}

{% block bottomjs %}
  <script src="{{settings.HOSTNAME}}{% static 'js/jquery.min.js' %}"></script>
  <script src="{{settings.HOSTNAME}}{% static 'js/helpers.js' %}"></script>
  <script src="{{settings.HOSTNAME}}{% static 'js/Toast.min.js' %}"></script>
  <script nonce="{{request.csp_nonce}}">
      applyCsrf();

      $('.message .close').on('click', function () {
           $(this).closest('.message').transition('fade');
      });
  </script>
{% endblock %}

<div id="dynamic-content">
  {% block storage-persistence %}
  <script nonce="{{request.csp_nonce}}">
    {# storage persistence #}
    {% if not settings.STORAGE_PERSISTENCE %}
    new Toast({
      message: `Data will be persisted on the node running this container,<br>
                but all data will be lost if this node goes away.<br>`,
      type: 'danger'
    });
    {% endif %}
  </script>
  {% endblock %}

  {% block billing-checks %}
  {% endblock %}

</div>

</body>
</html>
